<!DOCTYPE html>
<html lang="en" style="font-size: 100px;">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            width: 100%;
            height: 100%;
            background: #FFFFFF;
            color: #111111;
            font-size: 0.35rem;
            font-family: '微软雅黑','宋体',serif;
            overflow: hidden;
        }
        table th, td {
            white-space: nowrap;
            overflow: hidden;
            min-width: 0;
            max-width: 0;
            text-align: center;
        }
        .yy-meeting-header {
            padding: 0.3rem 0.15rem;
            border-bottom: 0 solid #554116;
            position: relative;
            background-color: #03173c;
            color: #fff;
            display: flex;
            align-items: center;
        }
        .yy-meeting-header .yy-meeting-header_title {
            width: 100%;
            display: inline-block;
            font-size: 0.7rem;
            text-align: center;
        }
        .yy-meeting-header .yy-meeting-header_time{
            flex:0 0 3rem;
        }
        .yy-meeting-body {
            padding: 0rem;
        }
        .yy-meeting-body table {
            width: 100%;
            border: 0.0rem solid #3d3637;
        }
        .yy-meeting-body table tr.active td {
            color: #009688;
        }
        .yy-meeting-body table th {
            padding: 0.1rem 0.15rem;
            line-height: 0.6rem;
            background: #94b1d5;
        }
        .yy-meeting-body table td {
            padding: 0.15rem 0.15rem;
            line-height: 0.6rem;
            height: 0.8rem;
            vertical-align: middle;
            font-weight: bold;
        }
        .yy-meeting-body table tr:nth-child(2n) > td {
            background: #94b1d5;
        }

        .scroll-text-box {
            width: 100%;
            border: 0px solid;
        }

        .scroll-text-wrapper {
            max-width: 100%;
            display: inline-block;
            vertical-align: top;
            overflow: hidden;
            white-space: nowrap;
        }

        .scroll-text-item {
            animation: scroll linear 4s alternate infinite;
            float: left;
        }

        @keyframes scroll {
            0% {
                margin-left: 0;
                transform: translateX(0);
            }

            10% {
                margin-left: 0;
                transform: translateX(0);
            }

            90% {
                margin-left: 100%;
                transform: translateX(-100%);
            }

            100% {
                margin-left: 100%;
                transform: translateX(-100%);
            }
        }
    </style>
    <script>
        var Utils = (function() {
            return {
                baseUrl: "http://10.104.104.197:9085",
                typeOf: function(obj) {
                    const toString = Object.prototype.toString;
                    const map = {
                        '[object Boolean]': 'boolean',
                        '[object Number]': 'number',
                        '[object String]': 'string',
                        '[object Function]': 'function',
                        '[object Array]': 'array',
                        '[object Date]': 'date',
                        '[object RegExp]': 'regExp',
                        '[object Undefined]': 'undefined',
                        '[object Null]': 'null',
                        '[object Object]': 'object',
                    };
                    return map[toString.call(obj)];
                },
                formatDate: function (date) {
                    try {
                        const _currentDate = this.typeOf(date) === 'number' || this.typeOf(date) === 'string' ? new Date(date) : date
                        var hours = _currentDate.getHours()
                        var minutes = _currentDate.getMinutes()
                        var second = _currentDate.getSeconds()

                        var timeStr = [Utils.f(hours), Utils.f(minutes), Utils.f(second)]

                        var year = _currentDate.getFullYear()
                        var month = _currentDate.getMonth() + 1
                        var date = _currentDate.getDate()

                        var dateStr = [year, Utils.f(month) , Utils.f(date)]
                        return [...dateStr, ...timeStr]
                    }catch (e){}
                    return ''
                },
                getQueryParams: function(url) {
                    url = url == null ? window.location.href : url
                    var search = url.substring(url.lastIndexOf('?') + 1)
                    var obj = {}
                    var reg = /([^?&=]+)=([^?&=]*)/g
                    search.replace(reg, (rs, $1, $2) => {
                        var name = decodeURIComponent($1)
                        let val = decodeURIComponent($2)
                        val = String(val)
                        obj[name] = val
                        return rs
                    })
                    return obj
                },
                f: function(val) {
                    return !isNaN(val)  && val < 10 ? '0' + val : val
                },
                request: function (url, method, data, callback) {
                    // 创建一个新的 XMLHttpRequest 对象
                    var xhr = new XMLHttpRequest();
                    xhr.open(method, url, true);
                    // 监听请求状态变化
                    xhr.onreadystatechange = function() {
                        if (xhr.readyState === 4 && xhr.status === 200) {
                            // 请求成功，调用回调函数并传入响应数据
                            callback(null, JSON.parse(xhr.responseText));
                        } else if (xhr.readyState === 4) {
                            // 请求失败，调用回调函数并传入错误信息
                            callback(xhr.statusText, null);
                        }
                    };
                    // 设置请求头
                    xhr.setRequestHeader('Content-Type', 'application/json');
                    // 发送请求
                    if (method && ['POST', 'PUT', 'DELETE'].includes(method.toUpperCase())) {
                        // 发送 POST 请求，并传入数据
                        xhr.send(data);
                    } else {
                        // 发送 GET 请求
                        xhr.send();
                    }
                },
                resetFontSize: function(width, height){
                    var baseWidth = width || 1920
                    var baseHeight = height || 1080
                    var baseFontSize = 100
                    var clientWidth = document.body.clientWidth
                    var fontSize = ((clientWidth / baseWidth) * baseFontSize) + 'px'
                    document.querySelector('html').style.fontSize = fontSize
                }
            }
        })()

        var DateTimeRender = (function(Utils, win){
            var _interval = null
            var _currentDate = new Date()
            var _currentTimestamp = 0
            var _oldTimestamp = 0
            var _weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
            var _dateTimeEle = null
            var _sendServerTimeout = 60
            var _renderFun = null
            var _startIntervalTime = function () {
                _interval = setInterval(function() {
                    if (_currentTimestamp > 0) {
                        _currentTimestamp += 1000
                        _currentDate = new Date(_currentTimestamp)
                    } else {
                        _currentDate = new Date();
                        _oldTimestamp = _currentDate.getTime();
                        _currentTimestamp = _currentDate.getTime()
                    }
                    _generatorDate()
                    if (_sendServerTimeout === 0) {
                        _sendServerTimeout = 60
                        _checkServerTime()
                    }
                    _sendServerTimeout--
                }, 1000)
            }


            var _clearIntervalTime = function () {
                if (_interval) {
                    clearInterval(_interval)
                }
            }

            var _checkServerTime = function () {
                var requestUrl = Utils.baseUrl + '/sse/heartbeat/connect'
                Utils.request(requestUrl, 'get', null ,function (error, res) {
                    if (!error && res && res.data) {
                        var date = res.data.serverTime || new Date().getTime()
                        if (date) {
                            date.replace(/-/g, '/')
                        }
                        _oldTimestamp = new Date(date).getTime()
                        _currentTimestamp = _oldTimestamp
                    }
                })
            }

            var _generatorDate = function () {
                var hours = _currentDate.getHours()
                var minutes = _currentDate.getMinutes()
                var second = _currentDate.getSeconds()

                var timeStr = [Utils.f(hours), Utils.f(minutes), Utils.f(second)].join(":")

                var year = _currentDate.getFullYear()
                var month = _currentDate.getMonth() + 1
                var date = _currentDate.getDate()

                var dateStr = Utils.f(month) + '月' + Utils.f(date) + '日'

                var weekIndex = _currentDate.getDay()
                var weekStr = _weeks[weekIndex];
                if (_dateTimeEle) {
                    _dateTimeEle.innerText = (dateStr + " " + weekStr + " " + timeStr)
                }
                if (_renderFun) {
                    _renderFun([
                            year,
                            Utils.f(month),
                            Utils.f(date),
                            Utils.f(hours),
                            Utils.f(minutes),
                            Utils.f(second)
                        ],
                        weekStr
                    )
                }

            }

            return {
                render: function (dateTimeEle, renderFun) {
                    _dateTimeEle = dateTimeEle
                    _renderFun = renderFun
                    _checkServerTime()
                    _startIntervalTime()
                }
            }
        })(Utils, window)

        var Render = (function() {
            var dataList = []

            // for (var i=0;i<17;i++) {
            //     var obj = {
            //         time: new Date().getTime(),
            //         address: '门诊大楼会议室5',
            //         content: '信息播控系统会议',
            //         depart: '信息科',
            //         status: i % 5 === 0 ? '1' : i % 3 === 0 ? 2 : 0
            //     }
            //     dataList.push(obj)
            // }

            var pageIndex = 1
            var rowCount = 1
            var pageInterval = null
            return {
                getDateList: function () {
                   return dataList
                },
                setDataList: function(data) {
                    dataList = data
                    this.render()
                },
                insertDataList: function(item) {
                    var rowIndex = dataList.length
                    dataList.push(item)
                    var currentPage = rowIndex % rowCount === 0  ? dataList.length / rowCount : Math.ceil(dataList.length / rowCount)
                    if (currentPage === pageIndex) {
                        this.insertRow(item, rowIndex)
                    }
                },
                calcRowsAndRowHeight: function (rowHeight) {
                   var height = document.body.clientHeight
                   var bodyInfo =  document.querySelector('.yy-meeting-body') .getBoundingClientRect()
                   var thInfo = document.querySelector('.yy-meeting-body table > thead > tr > th').getBoundingClientRect()
                   var bodyPadding = thInfo.top - bodyInfo.top

                   var currentRowHeight = rowHeight
                   var rows = Math.floor((height - thInfo.bottom - bodyPadding) / currentRowHeight)
                   var otherHeight = height - rows * currentRowHeight
                   if (otherHeight > 0) {
                       currentRowHeight = otherHeight / rows + currentRowHeight
                   }
                   return {rows: rows, rowHeight: currentRowHeight}
                },
                insertRow: function (row, rowIndex) {
                    var table = document.querySelector('div.yy-meeting-body table')
                    var ths = table.querySelectorAll('thead > tr > th')
                    var tbody = table.querySelector('tbody')
                    var tr = document.createElement('tr')
                    var status = 0
                    for (var i = 0; i < ths.length; i++) {
                        var th = ths[i]
                        var field = th.dataset.field
                        var td = document.createElement("td")
                        var fieldVal = row ? row[field] : ''
                        if (field === 'status') {
                            status = fieldVal
                            if (fieldVal == 0) {
                                fieldVal = '待开始'
                            } else if (fieldVal == 1) {
                                fieldVal = '即将开始'
                            } else {""
                                fieldVal = '进行中'
                            }
                        }
                        td.innerHTML = "<div class='scroll-text-box'> <div class='scroll-text-wrapper'> <div class='scroll-text-item'>"+fieldVal+"</div></div> </div>"
                        if(status === 2) {
                            tr.setAttribute("class", "active")
                        }
                        tr.append(td)
                    }
                    tr.setAttribute('data-index', rowIndex)
                    tbody.append(tr)
                    return tr
                },
                init: function () {
                    var table = document.querySelector('div.yy-meeting-body table')
                    var tbody = table.querySelector('tbody')
                    if (!tbody) {
                        tbody = document.createElement('tbody')
                        table.append(tbody)
                    }
                    var firstRowEl = this.insertRow({time: '',address: '', content:'', depart: ''}, 0)
                    var rowHeight = firstRowEl.getBoundingClientRect().height
                    var rowsAndHeight = this.calcRowsAndRowHeight(rowHeight)
                    rowCount = rowsAndHeight.rows
                    console.log('rowCount::', rowCount)
                    return this
                },
                clear: function () {
                    if (pageInterval) {
                        clearTimeout(pageInterval)
                        pageInterval = null
                    }
                    var dataContainer = document.querySelector('.yy-meeting-body table tbody')
                    dataContainer.innerHTML = ""
                    return this
                },
                renderPage: function () {
                    var pageList = dataList.slice((pageIndex - 1) * rowCount , pageIndex * rowCount)
                    for (var i = 0; i < pageList.length; i++) {
                        this.insertRow(pageList[i], i)
                    }
                    return this
                },
                render: function () {
                    var that = this
                    var pageCount = dataList.length % rowCount === 0 ? dataList.length / rowCount : Math.ceil(dataList.length / rowCount)
                    if(pageIndex >= 1) {
                        this.clear()
                    }
                    this.renderPage()
                    if (pageIndex + 1 <= pageCount) {
                        pageIndex += 1
                    } else {
                        pageIndex = 1
                    }
                    pageInterval = setTimeout(function () {
                        that.render()
                    }, 15000)
                }
            }

        })()

        var Meeting = (function (Render) {
            var _interval = null
            return {
                list: function (_callback) {
                    var requestUrl = Utils.baseUrl + '/tr/oa/list'
                    Utils.request(requestUrl, 'get', null,function (error, res) {
                        if (!error && res && res.data) {
                            var dataList = []
                            if (res.data) {
                                for(var i = 0; i < res.data.length; i++) {
                                    var obj = {
                                        time: res.data[i].startTime,
                                        address: res.data[i].address,
                                        content: res.data[i].content,
                                        depart: res.data[i].departName
                                    }
                                    dataList.push(obj)
                                }
                            }
                            if (_callback) {
                                _callback(dataList)
                            }
                        } else {
                            if (_callback) {
                                _callback([])
                            }
                        }
                    })
                },
                init: function () {
                   const that = this
                   that.list(function (dataList) {
                       Render.setDataList(dataList)
                        // 一分钟同步一次
                       _interval = setInterval(function () {
                          that.load()
                        }, 60 * 1000)
                    })
                },
                load: function () {
                    this.list(function (dataList) {
                        if (dataList.length) {
                            var exitDataList = Render.getDateList()
                            for (var i = 0; i < dataList.length; i++) {
                                var exitItem = exitDataList.find(item => item.time === dataList[i].time && item.depart === dataList[i].depart)
                                if (!exitItem) {
                                    Render.insertDataList(dataList[i])
                                }
                            }
                        }

                    })
                }
            }
        })(Render)

        window.onload = function () {
            var params = Utils.getQueryParams(window.location.href)
            if (params && params.server_url) {
                Utils.baseUrl = params.server_url
            }
            DateTimeRender.render(null, function (dateArr, week) {
                document.querySelector('div.yy-meeting-header_title').innerHTML = dateArr[0] + "年" + dateArr[1] + "月" + dateArr[2] + '日会议室使用情况'
                document.querySelector("div.yy-meeting-header_time .yy-meeting-header_time-hours").innerHTML = [dateArr[3],dateArr[4],dateArr[5]].join(":")
            })
            Utils.resetFontSize()
            window.onresize = function () {
                Utils.resetFontSize()
            }

            Render.init()
            Meeting.init()
        }
    </script>
</head>
<body>
    <div class="yy-meeting-header">
        <div style="flex: 0 0 3rem;">
            <img src="" alt="" style="width: 100%;">
        </div>
        <div class="yy-meeting-header_title">会议室使用情况</div>
        <div class="yy-meeting-header_time">
            <div class="yy-meeting-header_time-hours" style="text-align: right;font-size: 0.5rem;"></div>
        </div>
    </div>

    <div class="yy-meeting-body">
        <table cellpadding="0" cellspacing="1">
            <thead>
                <tr>
                    <th data-field="time" style="width:10%;">时间</th>
                    <th data-field="address" style="width:20%">地点</th>
                    <th data-field="content">内容</th>
                    <th data-field="depart" style="width:15%">主办科室</th>
                </tr>
            </thead>
        </table>
    </div>
</body>
</html>